import React,{Component} from "react";
import PropTypes from 'prop-types'

export default class MainItem extends Component{
    state={isHover:false}
    static propTypes={
        id:PropTypes.string.isRequired,
        value:PropTypes.string.isRequired,
        done:PropTypes.bool.isRequired
     }
    //更改鼠标上浮状态
    changeIsHover=(flag)=>{
        this.setState({isHover:flag})
    }
    //传递id值出去
    handleDelete=(id)=>{
        if(window.confirm('确定删除吗？')){
            this.props.handleDelete([id])
        }
    }
    //需要更新选中状态的item
    handleUpdate=(id,e)=>{
        this.props.handleUpdate([id],e.target.checked)
    }
        render(){
        const {id,value,done}=this.props
        const{isHover}=this.state
        return(
            <li style={{backgroundColor:isHover ? '#ddd' : 'white'}} onMouseEnter={()=>{this.changeIsHover(true)}} onMouseLeave={()=>{this.changeIsHover(false)}}>
                <label>
                    <input type="checkbox" checked={done} onChange={(e)=>this.handleUpdate(id,e)}/>
                    <span>{value}</span>
                </label>
                <button className="btn btn-danger" onClick={()=>this.handleDelete(id)} style={{display:isHover ?'block':'none'}}>删除</button>
            </li>
        )
    }

}
